<template>
  <div class="my">
    <div class="header jusCenter">
      <div class="card aliCenter" style="position: relative">
        <div class="">
          <img class="Avatar" :src="userInfo.head" alt="" srcset="" />
          <!-- <el-avatar :size="330" :src="userInfo.head" /> -->
        </div>
        <div class="nameBox">
          <div class="titleName">{{ userInfo.name }}</div>
          <div class="nameAndPhone aliCenter">
            <div class="name">
              <el-icon><User /></el-icon>&nbsp;{{ userInfo.name }}
            </div>
            <div class="phone aliCenter" style="display: flex; align-items: center">
              <el-icon class="icons"><Message /></el-icon>&nbsp;{{ userInfo.phone }}
            </div>
          </div>
          <div class="aliCenter address">
            <el-icon><Location /></el-icon>&nbsp;{{ userInfo.region }},{{ userInfo.address }}
          </div>
        </div>
        <div class="exit">
          <el-icon @click="ExitFn" color="#ffdd00"><SwitchButton /></el-icon>
        </div>
      </div>
    </div>
    <div class="rdioSelect aliCenter">
      <div
        @click="selectFn(item)"
        :class="item.select ? 'rdio' : 'rdio2'"
        v-for="(item, index) in radioData"
        :key="index"
      >
        {{ item.title }}
      </div>
    </div>
    <Receiving v-if="selectRdio == 'Receiving Management'"></Receiving>
    <Shop v-else-if="selectRdio == 'Store Management'"></Shop>
    <Warranty v-else-if="selectRdio == 'Warranty Management'"></Warranty>
    <Shipment v-else-if="selectRdio == 'Shipping Management' && ifShipment"></Shipment>
    <Inventory v-else-if="selectRdio == 'Inventory Management'"></Inventory>
    <ShipmentToPartners
      v-else-if="selectRdio == 'Shipping to Store' && ifShipment"
    ></ShipmentToPartners>
    <el-dialog class="exitBox" v-model="dialogVisibleExit" :before-close="handleClose">
      <div class="dialogBox">
        <div class="title center exitTop">Confirm to exit?</div>
        <div class="buttons" style="width: 100%">
          <div class="center">
            <div class="button center cancel" @click="ButtonexitFn(0)">cancel</div>
            <div class="button center exitButton" @click="ButtonexitFn(1)">exit</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { Delete, Search } from '@element-plus/icons-vue'
import { uploadAvatar } from '@/http/api/my.js'
import Cookie from 'js-cookie'
import { ref, reactive, onMounted } from 'vue'
import Receiving from './components/Receiving.vue'
import Shop from './components/shop.vue'
import Warranty from './components/quality.vue'
import Shipment from './components/Shipment.vue'
import Inventory from './components/inventory.vue'
import ShipmentToPartners from './components/ShipmentToPartners.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let radioData = ref([
  {
    title: 'Warranty Management',
    select: true
  },
  {
    title: 'Store Management',
    select: false
  }, {
    title: 'Receiving Management',
    select: false
  }, {
    title: 'Inventory Management',
    select: false
  }, {
    title: 'Shipping Management',
    select: false
  }
])
let ifShipment = ref(false)
let userInfo = reactive({})
let selectRdio = ref('Warranty Management')
const selectFn = (data) => {
  selectRdio.value = data.title
  radioData.value.forEach((item, index) => {
    if (item.title == data.title) {
      item.select = true
    } else {
      item.select = false
    }
  })
}
const getData = () => {
  if (!JSON.parse(localStorage.getItem('storeInfo'))) {
    router.push('/login')
  } else {
    Object.assign(userInfo, JSON.parse(localStorage.getItem('storeInfo')))
    userInfo.region = userInfo.region.includes('[') ? JSON.parse(userInfo.region).join(',') : userInfo.region
    if (userInfo.type == '市级运营商' || userInfo.type == '省级代理商' || userInfo.type == '国家级代理商') {
      ifShipment.value = true

      radioData.value = [
        {
          title: 'Warranty Management',
          select: true
        },
        {
          title: 'Store Management',
          select: false
        }, {
          title: 'Receiving Management',
          select: false
        }, {
          title: 'Inventory Management',
          select: false
        }, {
          title: 'Shipping to Store',
          select: false
        }, {
          title: 'Shipping Management',
          select: false
        },
      ]
    } else {
      ifShipment.value = false
      radioData.value = [
        {
          title: 'Warranty Management',
          select: true
        },
        {
          title: 'Store Management',
          select: false
        }, {
          title: 'Receiving Management',
          select: false
        }, {
          title: 'Inventory Management',
          select: false
        }, {
          title: 'Shipping Management',
          select: false
        },
      ]
    }
  }
}
let dialogVisibleExit = ref(false)
const ExitFn = () => {
  dialogVisibleExit.value = true
}
const ButtonexitFn = (number) => {
  if (number == 1) {
    if (localStorage.getItem('userInfo')) {
      localStorage.removeItem('userInfo')
    } else {
      localStorage.removeItem('storeInfo')
    }

    Cookie.remove('token')
    router.push('/')
  }
  dialogVisibleExit.value = false
}
onMounted(() => {
  getData()
})


</script>

<style lang="scss" scoped>
.Avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}
::v-deep .exitBox {
  padding: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #15191a;
}
::v-deep .el-dialog {
  width: 500px;
}
.dialogBox {
  width: 500px;
  height: 200px;
  background: #15191a;
  position: relative;
  padding: 10px 0 0 0;
}
.exitTop {
  margin-top: 20px;
}
.buttons {
  margin-top: 30px;
  // position: absolute;
  // left: 50%;
  // bottom: 20px;
  // transform: translateX(-50%);
}
.button {
  width: 200px;
  height: 50px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  color: black;
  cursor: pointer;
}
.cancel {
  background: #ffdd00;
  margin-right: 10px;
}
.cancel:active {
  background: black;
}
.exitButton {
  background: red;
}
.exitButton:active {
  background: black;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
::v-deep .el-dialog {
  padding: 0;
  overflow: hidden;
}
.my {
  min-height: 100vh;
  background: #15191a;
  padding: 0 0 50px 0;
}
.header {
  .card {
    background: #1c2123;
    border-radius: 20px;
    width: 1800px;
    height: 450px;
    padding: 0 20px;
    margin-top: 80px;
  }
  .nameBox {
    margin-left: 50px;
    .titleName {
      width: 1000px;
      font-size: 60px;
      color: #ffdd00;
      font-weight: bold;
      white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
      overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
      word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
    }
    .nameAndPhone {
      margin-top: 50px;
      .name {
        font-size: 35px;
        color: #ffdd00;
      }
      .phone {
        font-size: 35px;
        color: #ffdd00;
        margin-left: 50px;
      }
    }
  }
}
.address {
  font-size: 35px;
  color: #ffdd00;
}
.rdioSelect {
  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 50px;
  width: 1800px;
  .rdio {
    font-weight: bold;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffdd00;
    margin-right: 20px;
  }
  .rdio2 {
    font-weight: bold;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    margin-right: 20px;
  }
}
.exit {
  position: absolute;
  right: 50px;
  top: 50px;
  font-size: 40px;
  cursor: pointer;
}
</style>